<template>
    <view class="bg-white">
        <image style="width: 750rpx; height: 350rpx;" :src="(seller_info.banner || seller_info.logo) | ossUrl(750)"></image>
        <view class="bg-white margin-lr-26 radius-16 shadow-warp" style="margin-top: -150rpx; position: relative;">
            <view class="padding-30">
                <view class="flex justify-between">
                    <view>
                        <view class="text-xl text-bold text-cut-1" style="width: 490rpx;">
                            {{seller_info.name}}
                        </view>
                        <view class="text-sm">
                            <view class="margin-top-10 text-cut-2 text-666 line-height-13em">
                                <text v-if="seller_info.remark">{{seller_info.remark}}</text>
                                <text v-else>无公告</text>
                            </view>
                            <view class="margin-top-10 text-gray" v-if="seller_info.is_same_city > 0">
                                <text class="margin-right-20">
                                    同城配送费
                                    <text class="text-xs margin-left-4">￥</text>
                                    {{seller_info.same_city_price | floor}}
                                </text>
                                <text>
                                    最远配送 {{seller_info.is_same_city}}km
                                </text>
                            </view>
                        </view>
                    </view>
                    <view class="margin-left-16">
                        <image class="radius-16" style="width: 122rpx; height: 122rpx;" :src="seller_info.logo | ossUrl(122)"></image>
                    </view>
                </view>
                <view class="margin-top-4">
                    <view class="text-gray text-sm">
                        <text>
                            营业时间 {{seller_info.open_start_time | timeFormat('hh:mm')}}
                            <text class="padding-lr-4">-</text>
                            <text v-if="seller_info.open_end_time==0">24:00</text>
                            <text v-else>{{seller_info.open_end_time | timeFormat('hh:mm')}}</text>
                        </text>
                        <text v-if="seller_info.contact_phone" class="margin-left-20">
                            联系电话 {{seller_info.contact_phone}}
                        </text>
                    </view>
                </view>
                <view class="flex flex-direction margin-top-14 margin-lr-10" v-if="seller_user_id">
                    <button v-if="!sa_id" @tap="face_pay_dialog.show = true" class="cu-btn shadow" :class="[seller_info.open_item ? 'bg-nddyny' : 'bg-disabled']">
                        <text>当面支付</text>
                        <text class="text-sm">
                            （ 赠送金券 {{seller_info.gold_coupon_ratio}} % ）
                        </text>
                    </button>
                    <button v-else @tap="$store.commit('userNavTo', '/seller/user/apply?seller_id='+seller_info.seller_id+'&sa_id='+sa_id)"
                        class="cu-btn shadow bg-blue">
                        申请认领
                    </button>
                </view>
            </view>
        </view>
        <modalDialog :show.sync="face_pay_dialog.show" title="当面支付" :confirm="()=>{pay.show = true}">
            <template #content>
                <nFormItem title="支付总额" :data.sync="pay" field="price_amount" format="digit"></nFormItem>
                <nFormItem title="赠送金券" class_value="text-nddyny" :tap="()=>{$store.state.user.auth_token?'':$store.commit('userRelogin')}"
                    :value="$store.state.user.auth_token ? pay.price_info.bonus_gold_coupon_amount : '登录后可得，点此去登录'"></nFormItem>
                <nFormItem title="支付宝" class_value="text-red" :value="pay.price_info.pay_price"></nFormItem>
                <nFormItem type="switch" title="消费余额" :title_number="computedTitle2AdvpayAmount" :data.sync="pay" field="use_advpay_amount"
                    format="number">
                    <template #switchLeft>
                        <view v-if="pay.price_info.pay_advpay_amount > 0" class="margin-right-10 text-red">-{{pay.price_info.pay_advpay_amount}}</view>
                    </template>
                </nFormItem>
                <nFormItem type="switch" title="消费红包" :title_number="computedTitle2VoucherAmount" :data.sync="pay"
                    field="use_voucher_amount" format="number">
                    <template #switchLeft>
                        <view v-if="pay.price_info.pay_voucher_amount > 0" class="margin-right-10 text-red">-{{pay.price_info.pay_voucher_amount}}</view>
                    </template>
                </nFormItem>
            </template>
        </modalDialog>
        <pay :pay.sync="pay" :paySuccess="paySuccess"></pay>
    </view>
</template>

<script>
    export default {
        props: ['seller_user_id', 'seller_info', 'params', 'sa_id'],
        data() {
            let price_info = {
                pay_price: '￥0',
                bonus_gold_coupon_amount: '0',
                pay_advpay_amount: 0,
                pay_voucher_amount: 0
            };
            let form = {
                pay_type: '1',
                seller_user_id: this.seller_user_id,
                price_amount: '',
                use_advpay_amount: '0',
                use_voucher_amount: '0'
            }
            return {
                face_pay_dialog: {
                    show: false
                },
                pay: {
                    price_info_bak: this.$nddyny.object.copy(price_info),
                    price_info: this.$nddyny.object.copy(price_info),
                    formtag: {},
                    form: this.$nddyny.object.copy(form),
                    formbak: this.$nddyny.object.copy(form),
                    tip_content: '确定要使用当面支付吗？',
                    pay_uri: '/userPay/sellerPriceBalance/pay',
                    show: false,
                    load_info: this.params || {},
                },
            };
        },
        watch: {
            'pay.form.price_amount'() {
                this.computePrice();
            },
            'pay.form.use_advpay_amount'() {
                this.computePrice();
            },
            'pay.form.use_voucher_amount'() {
                this.computePrice();
            }
        },
        computed: {
            computedTitle2AdvpayAmount() {
                return this.computedTitle2Amount('advpay_amount');
            },
            computedTitle2VoucherAmount() {
                return this.computedTitle2Amount('voucher_amount');
            }
        },
        mounted() {
            if(this.params.is_face_pay == 1) {
                this.face_pay_dialog.show = true;
            }
        },
        methods: {
            computedTitle2Amount(field) {
                let amount = this.$nddyny.number.floor(this.$store.state.user.user_asset_info[field]);
                let result = amount;
                if (this.pay.price_info['pay_' + field] > 0) {
                    result = this.$nddyny.bc.sub(
                        result, this.pay.price_info['pay_' + field]
                    );
                }
                return result;
            },
            computePrice() {
                this.$api.post(this, {
                    url: '/userPay/sellerPriceBalance/computePrice',
                    data_key: 'pay',
                    success: (Result) => {
                        if (this.$R.noSuccess(Result)) {
                            this.$set(this.pay, 'price_info', this.pay.price_info_bak);
                            return;
                        }
                        Result.result.pay_price = '￥' + Result.result.pay_price;
                        Result.result.bonus_gold_coupon_amount = '+' + Result.result.bonus_gold_coupon_amount;
                        this.$set(this.pay, 'price_info', Result.result);
                        this.pay.form.use_advpay_amount =
                            this.pay.price_info.pay_advpay_amount > 0 ? '1' : '0';
                        this.pay.form.use_voucher_amount =
                            this.pay.price_info.pay_voucher_amount > 0 ? '1' : '0';
                    }
                });
            },
            paySuccess() {
                if (this.$store.state.user.auth_token) {
                    this.$store.commit('userLaunchTo', '/seller/facePayList');
                }
            },
        }
    }
</script>
